<template>
  <div>
  <div class="recommend-title">热销推荐</div>
  <ul>
  <router-link tag="li" class="item" v-for="item in recomlists" :key="item.id" :to="'/detail/'+item.id">
  <div class="item-img-wrapper">
  <img :src="item.img" class="item-img">
  </div>
  <div class="item-info">
  <p class="item-title">{{item.title}}</p>
  <p class="item-desc">{{item.desc}}</p>
  <button class="item-button">查看详情</button>
  </div>
  </router-link>
  </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: ['recomlists']
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/mixins.styl'
 .recommend-title
  line-height : 3 rem
  background : #f4f3f3
  text-indent : 1 rem
  font-size: 1.3rem
 .item
   overflow  : hidden
   display : flex
   height : 7 rem
   .item-img
     height : 6 rem
     width : 6 rem
     padding : 0.5 rem
   .item-info
     flex: 1
     min-width : 0
    .item-title
      line-height : 3.4 rem
      font-size : 1.2 rem
      ellipsis()
    .item-desc
      line-height : 1 rem
      color : #918e8e
      ellipsis()
    .item-button
      line-height 1.2 rem
      margin-top : 0.5 rem
      background #ff9300
      border-radius : 0.4 rem
      padding : 0.2 rem
      color : #fff
</style>
